import React, { useState, useEffect, useRef } from 'react';
import { connect } from 'umi';
import { Button, Card } from 'antd';
import TableDataBlock from '@/components/TableDataBlock';
import SysMenuSet from './components/Menu/SysMenuSet';

const ResourceMenuList = (props) => {
  const { list, loading, dispatch } = props;
  const [visible, setVisible] = useState(false);
  const childRef = useRef();
  // table 表头
  const getColumns = [
    {
      title: '菜单名称',
      dataIndex: 'accessName',
    },
    {
      title: '菜单状态',
      type: 'switch',
      dataIndex: 'status',
      render: (val, row) => {
        const { id } = row;
        return {
          auth: true,
          checked: val === '1',
          onClick: () =>
            dispatch({
              type: 'setting/fakeAuthAccess',
              payload: {
                ...row,
                status: val ? '0' : '1',
              },
              callback: () => {
                handleCallback();
              },
            }),
        };
      },
    },
    {
      type: 'handle',
      dataIndex: 'id',
      render: (val, record) => [
        {
          type: 'edit',
          auth: true,
          click: () => {
            setVisible({
              show: true,
              detail: record,
            });
          },
        },
      ],
    },
  ];

  const handleCallback = () => {
    childRef.current.fetchGetData();
  };

  const btnExtra = [
    {
      text: '新增',
      onClick: () =>
        setVisible({
          show: true,
          detail: {
            autoAccess: '1',
          },
        }),
    },
  ];
  return (
    <div>
      <TableDataBlock
        btnExtra={btnExtra}
        cRef={childRef}
        loading={loading}
        columns={getColumns}
        rowKey={(record) => `${record.id}`}
        dispatchType="setting/fetchGetList"
        params={{ limit: 999 }}
        pagination={false}
        {...list}
      ></TableDataBlock>
      <SysMenuSet
        visible={visible}
        onClose={() => setVisible(false)}
        handleCallback={handleCallback}
      ></SysMenuSet>
    </div>
  );
};

export default connect(({ setting, loading }) => ({
  list: setting.list,
  loading: loading.effects['setting/fetchGetAuthMenuTree'],
}))(ResourceMenuList);
